import {ElMessage,ElMessageBox} from "element-plus"
import {WarnTriangleFilled,CircleCheckFilled,CircleCloseFilled} from "@element-plus/icons-vue";

export const setProperty = (prop: string, val: any, dom = document.documentElement) => {
    dom.style.setProperty(prop, val);
};

export const mix = (color1: string, color2: string, weight: number = 0.5): string => {
    let color = '#';
    for (let i = 0; i <= 2; i++) {
        const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16);
        const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16);
        const c = Math.round(c1 * weight + c2 * (1 - weight));
        color += c.toString(16).padStart(2, '0');
    }
    return color;
};
export const $msg = ({type,message})=>{
    const component = type === 'success' ? CircleCheckFilled : type === 'error' ? CircleCloseFilled : WarnTriangleFilled;
    const title = type === 'success' ? '成功' : type === 'error' ? '错误' : '警告';
    ElMessage({
        type: type,
        dangerouslyUseHTMLString: true,
        customClass: `${type}-msg`,
        icon: component,
        message: `<div class="${type}-msg-content"><h4>${title}！</h4><p>${message}</p></div>`,
    })
}

export const $confirm = ({title,type})=>{
    const html1 = `<div class="${type}-confirm-content"><h4>删除确认</h4><p>${title}</p></div>`
    const html2 = `<div class="${type}-confirm-content"><h4>${title}</h4></div>`
     return new Promise((resolve, reject) => {
        ElMessageBox.confirm(type ? html1 : html2, '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showClose: false,
            dangerouslyUseHTMLString: true,
            buttonSize: 'large',
            customClass: `hb-confirm ${type}`,
            type: type ? type : '',
            icon: type ? WarnTriangleFilled : ''
        }).then(() => {
            resolve(true)
        }).catch(() => {
            reject(false)
        })
    })
}